<template>
  <div class="view-container">
    <header class="view-header">
      <div class="header-container">
        <div class="header-title">
          <i class="el-icon-s-grid"></i>
          <span>归档统计</span>
        </div>
        <div class="header-form">

          <div class="header-form-item">
            <el-select v-model="searchForm.letterSource" placeholder="办理事项" @change="fetchData" clearable>
              <el-option value="领导交办" label="领导交办"></el-option>
              <el-option value="上级指示" label="上级指示"></el-option>
              <el-option value="信访办理" label="信访办理"></el-option>
              <el-option value="材料报送" label="材料报送"></el-option>
            </el-select>
          </div>
          <div class="header-form-item">
            <el-select v-model="searchForm.letterType" placeholder="督办类别" @change="fetchData" clearable>
              <el-option value="督办" label="督办"></el-option>
              <el-option value="提醒" label="提醒"></el-option>
            </el-select>
          </div>
          <div class="header-form-item">
            <el-input v-model="searchForm.letterTitle" placeholder="标题" @input="AntiShake" clearable></el-input>
          </div>

        </div>
      </div>
    </header>

    <section class="table-container view-section">
      <el-table
        ref="table"
        :data="tableData"
        stripe
        border
      >
        <el-table-column prop="letterTitle" label="标题" align="left" >
          <template slot-scope="c">
            <el-link @click="goDetail(c.row.letterId)">{{c.row.letterTitle}}</el-link>
          </template>
        </el-table-column>
        <el-table-column  prop="letterType" label="督办类别" align="center" width="100"/>
        <el-table-column  prop="letterSource" label="办理事项" align="center" width="100"/>
        <el-table-column sortable prop="fillDate" label="拟交办日期" :formatter="fillDateFmt" align="center" width="150"/>
        <el-table-column sortable prop="latestDate" label="办结期限" :formatter="latestDateFmt" align="center" width="150"/>
      </el-table>
    </section>
    <footer>
      <el-pagination
        :page-sizes="[10, 20, 50, 100]"
        style="text-align: right"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        :page-size="page.size"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>

  </div>
</template>

<script>
  import letterAPI  from "@/api/letter/letter/"
  import listMixin from '@/mixin/listMixin'
  export default {
    name: 'LetterTongJi',
    mixins:[listMixin],
    data() {
      return {
        searchForm:{
          letterSource:'',
          letterTitle:'',
          letterType:''
        },
      }
    },
    created() {

    },
    methods: {
      fetchData(){

      },
      fillDateFmt(row){
        return this._util.format(row.fillDate)
      },
      latestDateFmt(row){
        return this._util.format(row.latestDate)
      }
    }
  }
</script>

<style scoped lang="scss">

</style>
